<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                     <div class="decorate-square"></div>
                    <h2>配送区域管理</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                  <card class="mb-10">
                    <div class="normal-list-page-hd clearfix ">
                      围栏名称：
                      <Input v-model="queryData.name" @keyup.native="clearBlank" placeholder="请输入围栏名称" class="mr-10" style="width: 200px" />
                      <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
                    </div>
                  </card>
                  <div class="mb-2">
                    <Button-group>
                      <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                        删除
                      </Button>
                      <Button custom-icon="iconfont icon-fangkuai2" size="small" type="primary" @click="showCreateModal">
                        新建
                      </Button>
                    </Button-group>
                  </div>
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                      <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                            @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                            show-sizer></Page>
                    </div>
                </div>
				<!--新建&修改-->
				<Modal v-model="modal.coCompany.isShow" :loading="modal.coCompany.loading" :mask-closable="false" :title="modal.coCompany.title" @on-ok="postData">
				    <Form ref="systemFrom" :model="modal.coCompany.formData" :rules="modal.coCompany.rules" :label-width="120">
				        <FormItem label="名称"  prop="name">
				            <Input placeholder="请输入名称" v-model="modal.coCompany.formData.name" @keyup.native="clearBlank" style="width:300px;"/>
				        </FormItem>
				        <FormItem label="备注"  prop="info">
				            <Input placeholder="请输入备注" v-model="modal.coCompany.formData.info" style="width:300px;"/>
				        </FormItem>
				    </Form>
				</Modal>
                <!--新建&修改地图-->
                <Modal v-model="modal.coCompany.show"  :mask-closable="false" title="地理围栏" @on-ok="mapclose"  width='1500px'>
					<div id="wlmap">
						<bdmap :routerData="routerData" v-if='hackReset==true'></bdmap>
					</div>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
import CoCompanyApi from '@/api/mall/Geographicalfence.js'
import moment from 'moment'
import { Message } from 'iview'
import bdmap from '@/components/bdmap/bdmap.vue'

export default {
  name: 'Geographicalfence',
  components:{bdmap},
  data () {
    return {
		hackReset:false,
      // 弹出层数据
	  routerData:{
		  type:'5211',
		  pointStrings:''
	  },
      modal: {
        coCompany: {
		  show:false,
		  load:true,
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: {
            name: [
              {
                required: true,
                message: '此项不能为空',
                trigger: 'blur'
              }
            ],
            url: [
              {
                required: true,
                message: '请填写URL',
                trigger: 'blur'
              }
            ]
          },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          /** 开始自动生成 */
          { title: 'id', minWidth:120,align: 'center', key: 'id' },
          { title: '名称',minWidth:120, align: 'center', key: 'name' },
		  { title: '类型',minWidth:120, align: 'center', key: 'type' ,
			render: (h, params) => {
				if(params.row.type==0){
					return h('div','圆形');
				}else if(params.row.type==1){
					return h('div','多边形');
				}else{
					return h('div','暂无数据');
				}


			}
		  },
          { title: '备注',minWidth:120, align: 'center', key: 'info' },
          { title: '创建时间',
		  minWidth:200,
            align: 'center',
            key: 'createTime'
          },
          { title: '更新时间',
			minWidth:200,
            align: 'center',
            key: 'updateTime'
          },
          /** 自动生成结束 */
          {
            title: '操作',
			fixed: 'right',
            align: 'center',
            minWidth:150,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'top',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData([params.row.id])
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),
				h(
				  'Tooltip',
				  {
				    props: {
				      placement: 'top',
				      content: '地图'
				    },
				    style: {
				      cursor: 'pointer'
				    }
				  },
				  [
				    h(
				      'Button',
				      {
				        props: {
				          type: 'success',
				          size: 'small'
				        },
				        style: {
				          marginRight: '5px',
				          padding: '1px 2px'
				        },
				        on: {
				          click: () => {
				            // this.showUpdateModal(params.index);
				            this.showmapModal(params.row.id)
				          }
				        }
				      },
				      [
				        h('Icon', {
				          props: {
				            type: 'md-navigate',
				            size: 18
				          }
				        })
				      ]
				    )
				  ]
				),
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    clearBlank () {
      this.queryData.name = this.queryData.name.replace(/[^\w\u4E00-\u9FA5]/g, '')
      // 不允许输入特殊符号
      this.modal.coCompany.formData.name = this.modal.coCompany.formData.name.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    // 获取列表
    getTableData () {
      const that = this
      // that.queryData.totalRecord = undefined
			that.list.loading=true
      CoCompanyApi.getPageList(that.queryData)
        .then(res => {
			// console.log((res))
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
					that.list.loading=false
          // that.queryData.page = res.data.page;
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },

    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate(valid => {
        if (valid) {
          if (!that.modal.coCompany.formData.id) { // 新建
            CoCompanyApi.add(that.modal.coCompany.formData)
              .then(res => {
                that.modal.coCompany.isShow = false
                // that.modal.coCompany.loading = false;
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          } else { // 修改
            CoCompanyApi.update(
              that.modal.coCompany.formData.id,
              that.modal.coCompany.formData
            )
              .then(res => {
                that.modal.coCompany.isShow = false
                // that.modal.coCompany.loading = false;
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          }
        } else {
          that.modal.coCompany.loading = false
          that.$nextTick(() => {
            that.modal.coCompany.loading = true
          })
        }
      })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
                    '<p>您确认删除id为 <strong>' +
                    ids.toString() +
                    '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          CoCompanyApi.del({
            ids: ids
          }).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach(element => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }else{
		this.delData(ids)
		this.list.selections=[]
	  }
    },

    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },
		inQuire() {
		  const that = this;
			that.queryData.page=1;
		  // ConversionApi.getPageList(that.queryData);
		  that.getTableData();
		},
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal () {
      this.modal.coCompany.type = 'create'
      this.modal.coCompany.title = '新建'
      this.modal.coCompany.formData = {}
      this.modal.coCompany.isShow = true
    },

    // 显示修改弹窗
    showUpdateModal (id) {
      this.modal.coCompany.type = 'update'
      this.modal.coCompany.title = '修改'
      const that = this
      CoCompanyApi.getDetail(id).then(res => {
        // console.log(res)
        that.modal.coCompany.formData = res.data
      })
        .catch(error => {
          Message.error(error)
        })
      this.modal.coCompany.isShow = true
    },
	// 显示地图弹窗
	showmapModal (id) {
	  const that = this
	  CoCompanyApi.getDetail(id).then(res => {
	    // console.log(res.data)
		 this.routerData = {
			id:id,
			pointStrings: res.data.data,
			type: res.data.type
		  }
	  })
	    .catch(error => {
	      Message.error(error)
	    })
	  this.modal.coCompany.show = true
	  this.hackReset = false
		this.$nextTick(() => {
			this.hackReset = true
		})

	},
	mapclose(){
		this.getTableData()
	}
  },

  created () {
    this.getTableData()
  }
}
</script>
<style>
	#wlmap{
		width: 1450px;
		height: 700px;
	}
</style>
